<template>
    <!-- 我的账户中引用的组件 -->
    <div class="settingItem box-shadow">
        <span class="icon"><i class="iconfont" :class="icon"></i></span>
        <div class="text">
            <p class="p-top">{{pContent1}}<a @click="change" v-show="showChange">修改</a></p>
            <p class="p-bottom">{{pContent2}}</p>
        </div>
    </div>
</template>

<script>
export default {
    name: 'settingItem',
    props: ['pContent1','pContent2','showChange','icon'],
    methods:{
        change(){
            this.$emit('change-content')
        }
    }
}
</script>

<style lang="stylus" scoped>
    @import '~@/assets/styles/variables.styl'
    .settingItem
        width 568px;
        height 94px;
        border 1px solid #dbd3d3;
        // box-shadow 0px 2px 5px 1px rgba(0,0,0,.2);
        border-radius 3px;
        overflow auto;

        span
            float left;
            margin-top 23px;
            margin-left 23px;
            //占位代码 删
            display inline-block;
            width 46px;
            height 46px;
            border-radius 50% 
            background $color-theme-red 
            text-align center
            line-height 46px
            .iconfont 
                font-size 24px
                color #fff
        .text
            float left;
            width 473px;
            height 94px;
            // background-color pink;
            margin-left 24px;
            overflow auto;
            p.p-top
                margin-top 22px;
                font-size 14px;
                font-weight bold;
                margin-bottom 13px;
                color #2b3042;
                a 
                    float right;
                    font-size 14px;
                    color #e02828;
                    margin-right 21px;
                    cursor pointer;
            p.p-bottom
                font-size 14px;
                color #8c8f98;
            

</style>